<div class="page pageAccount hidden full-width" id="pageAccount">
  <div class="content full-width content-grid">
    <div class="profile">
      <div class="details both">
        <div class="avatarAndName">
          <div class="avatar"></div>
          <div>
            <div class="user">
              <div class="name">-</div>
              <div class="userFlags"></div>
            </div>
            <div class="badges"></div>
            <div class="allBadges"></div>
            <div class="joined" data-balloon-pos="right">-</div>
            <div
              class="streak"
              data-balloon-pos="right"
              data-balloon-length="large"
            >
              -
            </div>
          </div>
          <div class="levelAndBar">
            <div class="level" data-balloon-pos="up">-</div>
            <div class="xpBar" data-balloon-pos="up">
              <div class="bar" style="width: 0%"></div>
            </div>
            <div class="xp" data-balloon-pos="up">-/-</div>
          </div>
        </div>
        <div class="separator sep1"></div>
        <div class="typingStats vertical">
          <div class="started">
            <div class="title">tests started</div>
            <div class="value">-</div>
          </div>
          <div class="completed">
            <div class="title">tests completed</div>
            <div class="value">-</div>
          </div>
          <div class="timeTyping">
            <div class="title">time typing</div>
            <div class="value">-</div>
          </div>
        </div>
        <div class="separator sep2"></div>

        <div class="bioAndKeyboard vertical">
          <div class="bio">
            <div class="title">bio</div>
            <div class="value">-</div>
          </div>
          <div class="keyboard">
            <div class="title">keyboard</div>
            <div class="value">-</div>
          </div>
        </div>
        <div class="separator sep3"></div>

        <div class="socials big">
          <div class="title">socials</div>
          <div class="value">-</div>
        </div>
        <div class="buttonGroup">
          <button
            class="editProfileButton"
            data-balloon-pos="left"
            aria-label="Edit profile"
            role="button"
          >
            <i class="fas fa-pen"></i>
          </button>
          <button
            class="copyLink button"
            data-balloon-pos="left"
            aria-label="Copy public link"
            role="button"
          >
            <i class="fas fa-link"></i>
          </button>
        </div>
      </div>
      <div class="leaderboardsPositions">
        <div class="title">All-Time English Leaderboards</div>
        <div class="group t15">
          <div class="testType">15 seconds</div>
          <div class="pos">-</div>
          <div class="topPercentage">-</div>
        </div>
        <div class="group t60">
          <div class="testType">60 seconds</div>
          <div class="pos">-</div>
          <div class="topPercentage">-</div>
        </div>
      </div>
      <div class="pbsTime">
        <div class="group">
          <div class="quick">
            <div class="test">15 seconds</div>
            <div class="wpm">-</div>
            <div class="acc">-</div>
          </div>
        </div>
        <div class="group">
          <div class="quick">
            <div class="test">30 seconds</div>
            <div class="wpm">-</div>
            <div class="acc">-</div>
          </div>
        </div>
        <div class="group">
          <div class="quick">
            <div class="test">60 seconds</div>
            <div class="wpm">-</div>
            <div class="acc">-</div>
          </div>
        </div>
        <div class="group">
          <div class="quick">
            <div class="test">120 seconds</div>
            <div class="wpm">-</div>
            <div class="acc">-</div>
          </div>
        </div>
        <div class="buttonGroup">
          <div
            class="showAllButton"
            data-balloon-pos="left"
            aria-label="Show all personal bests"
            role="button"
          >
            <i class="fas fa-ellipsis-v"></i>
          </div>
        </div>
      </div>
      <div class="pbsWords">
        <div class="group">
          <div class="quick">
            <div class="test">10 words</div>
            <div class="wpm">-</div>
            <div class="acc">-</div>
          </div>
        </div>
        <div class="group">
          <div class="quick">
            <div class="test">25 words</div>
            <div class="wpm">-</div>
            <div class="acc">-</div>
          </div>
        </div>
        <div class="group">
          <div class="quick">
            <div class="test">50 words</div>
            <div class="wpm">-</div>
            <div class="acc">-</div>
          </div>
        </div>
        <div class="group">
          <div class="quick">
            <div class="test">100 words</div>
            <div class="wpm">-</div>
            <div class="acc">-</div>
          </div>
        </div>
        <div class="buttonGroup">
          <div
            class="showAllButton"
            data-balloon-pos="left"
            aria-label="Show all personal bests"
            role="button"
          >
            <i class="fas fa-ellipsis-v"></i>
          </div>
        </div>
      </div>
      <!-- <div class="group personalBestTables">
        <div class="title">personal bests</div>
        <div class="tables">
          <div class="titleAndTable timePbTable">
            <table width="100%">
              <thead>
                <tr>
                  <td width="1%">time</td>
                  <td width="33%">
                    wpm
                    <br />
                    <span class="sub">accuracy</span>
                  </td>
                  <td width="33%">
                    raw
                    <br />
                    <span class="sub">consistency</span>
                  </td>
                  <td width="33%">date</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>15</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                </tr>
                <tr>
                  <td>30</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                </tr>
                <tr>
                  <td>60</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                </tr>
                <tr>
                  <td>120</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                </tr>
              </tbody>
            </table>
            <div class="button showAllTimePbs">show all</div>
          </div>
          <div class="titleAndTable wordsPbTable">
            <table width="100%">
              <thead>
                <tr>
                  <td width="1%">words</td>
                  <td width="33%">
                    wpm
                    <br />
                    <span class="sub">accuracy</span>
                  </td>
                  <td width="33%">
                    raw
                    <br />
                    <span class="sub">consistency</span>
                  </td>
                  <td width="33%">date</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>10</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                </tr>
                <tr>
                  <td>25</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                </tr>
                <tr>
                  <td>50</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                </tr>
                <tr>
                  <td>100</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                </tr>
              </tbody>
            </table>
            <div class="button showAllWordsPbs">show all</div>
          </div>
        </div>
      </div> -->
    </div>

    <!-- <div class="group createdDate">Account created on -</div> -->

    <div class="testActivity hidden">
      <div class="wrapper">
        <div class="top">
          <div class="year"><select class="yearSelect"></select></div>
          <div class="title"></div>
          <div class="legend">
            <span>less</span>
            <div data-level="0"></div>
            <div data-level="1"></div>
            <div data-level="2"></div>
            <div data-level="3"></div>
            <div data-level="4"></div>
            <span>more</span>
          </div>
        </div>
        <div class="activity"></div>
        <div class="months"></div>
        <div class="daysFull"></div>
        <div class="days"></div>
        <div class="nodata hidden">No data found.</div>
        <div class="note">Note: All activity data is using UTC time.</div>
      </div>
    </div>

    <div id="ad-account-1-wrapper" class="ad full-width advertisement ad-h">
      <div class="icon"><i class="fas fa-ad"></i></div>
      <div id="ad-account-1"></div>
    </div>
    <div id="ad-account-1-small-wrapper" class="ad advertisement ad-h-s">
      <div class="icon small"><i class="fas fa-ad"></i></div>
      <div id="ad-account-1-small"></div>
    </div>

    <div class="group resultBatches hidden">
      <!-- <div class="title">result history</div> -->
      <div class="bars">
        <div class="leftText downloaded">Result history:</div>
        <div class="bar downloaded">
          <div class="fill"></div>
        </div>
        <div class="rightText downloaded">-</div>
        <div class="leftText limit">Result limit:</div>
        <div class="bar limit">
          <div class="fill"></div>
          <!-- <div class="indicator">
            <div class="text">completed tests</div>
            <div class="line"></div>
          </div> -->
        </div>
        <div class="rightText limit">-</div>
      </div>
      <div class="text"></div>
      <button class="loadMoreResults">load more</button>
    </div>

    <div class="group presetFilterButtons hidden">
      <div class="buttonsAndTitle">
        <div class="title">
          <i class="fas fa-sliders-h"></i>
          filter presets
        </div>
        <div class="buttons filterBtns" style="grid-column: 1/3"></div>
      </div>
    </div>
    <div class="group topFilters">
      <!-- <div
        class="button"
        id="currentConfigFilter"
        style="grid-column: 1/3;"
      >
        set filters to current settings
      </div> -->
      <div class="buttonsAndTitle" style="grid-column: 1/3">
        <div class="title">
          <i class="fas fa-filter"></i>
          filters
        </div>
        <div class="buttons">
          <button class="allFilters">all</button>
          <button class="currentConfigFilter">current settings</button>
          <button class="toggleAdvancedFilters">advanced</button>
          <button class="createFilterPresetBtn">save as preset</button>
        </div>
      </div>
      <div
        class="buttonsAndTitle testDate"
        style="grid-column: 1/3; margin-top: 1rem"
      >
        <!-- <div class="title">date</div> -->
        <div class="buttons filterGroup" group="date">
          <button filter="last_day">last day</button>
          <button filter="last_week">last week</button>
          <button filter="last_month">last month</button>
          <button filter="last_3months">last 3 months</button>
          <button filter="all">all time</button>
        </div>
      </div>
    </div>
    <div class="group filterButtons" style="display: none">
      <div class="buttonsAndTitle" style="grid-column: 1/-1">
        <div class="title">
          <i class="fas fa-tools"></i>
          advanced filters
        </div>
        <div class="buttons">
          <button class="noFilters">clear filters</button>
        </div>
      </div>
      <div class="buttonsAndTitle">
        <div class="title">
          <i class="fas fa-star"></i>
          difficulty
        </div>
        <div class="buttons filterGroup" group="difficulty">
          <button filter="normal">normal</button>
          <button filter="expert">expert</button>
          <button filter="master">master</button>
        </div>
      </div>
      <div class="buttonsAndTitle">
        <div class="title">
          <i class="fas fa-crown"></i>
          personal best
        </div>
        <div class="buttons filterGroup" group="pb">
          <button filter="no">no</button>
          <button filter="yes">yes</button>
        </div>
      </div>
      <div class="buttonsAndTitle">
        <div class="title">
          <i class="fas fa fa-bars"></i>
          mode
        </div>
        <div class="buttons filterGroup" group="mode">
          <button filter="words">words</button>
          <button filter="time">time</button>
          <button filter="quote">quote</button>
          <button filter="zen">zen</button>
          <button filter="custom">custom</button>
        </div>
      </div>
      <div class="buttonsAndTitle">
        <div class="title">
          <i class="fas fa-quote-right"></i>
          quote length
        </div>
        <div class="buttons filterGroup" group="quoteLength">
          <button filter="short">short</button>
          <button filter="medium">medium</button>
          <button filter="long">long</button>
          <button filter="thicc">thicc</button>
        </div>
      </div>
      <div class="buttonsAndTitle">
        <div class="title">
          <i class="fas fa-font"></i>
          words
        </div>
        <div class="buttons filterGroup" group="words">
          <button filter="10">10</button>
          <button filter="25">25</button>
          <button filter="50">50</button>
          <button filter="100">100</button>
          <button filter="custom">custom</button>
        </div>
      </div>
      <div class="buttonsAndTitle">
        <div class="title">
          <i class="fas fa-clock"></i>
          time
        </div>
        <div class="buttons filterGroup" group="time">
          <button filter="15">15</button>
          <button filter="30">30</button>
          <button filter="60">60</button>
          <button filter="120">120</button>
          <button filter="custom">custom</button>
        </div>
      </div>
      <div class="buttonsAndTitle">
        <div class="title">
          <i class="fas fa-at"></i>
          punctuation
        </div>
        <div class="buttons filterGroup" group="punctuation">
          <button filter="on">on</button>
          <button filter="off">off</button>
        </div>
      </div>
      <div class="buttonsAndTitle">
        <div class="title">
          <i class="fas fa-hashtag"></i>
          numbers
        </div>
        <div class="buttons filterGroup" group="numbers">
          <button filter="on">on</button>
          <button filter="off">off</button>
        </div>
      </div>
      <div class="tripleSelectsColumn">
        <div class="buttonsAndTitle tags">
          <div class="title">
            <i class="fas fa-tag"></i>
            tags
          </div>
          <div class="select filterGroup" group="tags">
            <select
              class="tagsSelect"
              group="tags"
              placeholder="select a tag"
              multiple
            ></select>
          </div>
        </div>
        <div class="buttonsAndTitle funbox">
          <div class="title">
            <i class="fas fa-gamepad"></i>
            funbox
          </div>
          <div class="select filterGroup" group="funbox">
            <select
              class="funboxSelect"
              group="funbox"
              placeholder="select a funbox"
              multiple
            ></select>
          </div>
        </div>
        <div class="buttonsAndTitle languages">
          <div class="title">
            <i class="fas fa-globe-americas"></i>
            language
          </div>
          <div class="select filterGroup" group="language">
            <select
              class="languageSelect"
              group="language"
              placeholder="select a language"
              multiple
            ></select>
          </div>
        </div>
      </div>
    </div>
    <div class="group noDataError hidden">
      No data found. Check your filters.
    </div>
    <div class="group chart">
      <!-- <div class="chartPreloader">
      <i class="fas fa-fw fa-spin fa-circle-notch"></i>
    </div> -->
      <div class="above"></div>
      <div class="chart">
        <canvas id="accountHistoryChart"></canvas>
      </div>

      <div class="below">
        <div class="text"></div>
        <div class="buttons">
          <button class="toggleResultsOnChart">
            <i class="fas fa-tachometer-alt"></i>
            Speed
          </button>
          <button class="toggleAccuracyOnChart">
            <i class="fas fa-bullseye"></i>
            Accuracy
          </button>
          <button class="toggleAverage10OnChart">
            <i class="fas fa-chart-line"></i>
            Avg of 10
          </button>
          <button class="toggleAverage100OnChart">
            <i class="fas fa-chart-line"></i>
            Avg of 100
          </button>
        </div>
      </div>
    </div>
    <div class="group histogramChart">
      <div class="chart" style="height: 200px">
        <canvas id="accountHistogramChart"></canvas>
      </div>
    </div>
    <div class="group dailyActivityChart">
      <div class="chart" style="height: 200px">
        <canvas id="accountActivityChart"></canvas>
      </div>
    </div>
    <div class="group estimatedWordsTyped">
      <div class="title">estimated words typed</div>
      <div class="val">-</div>
    </div>
    <div class="triplegroup stats">
      <div class="group testsStarted">
        <div class="title">tests started</div>
        <div class="val">-</div>
      </div>
      <div class="group testsCompleted">
        <div class="title">
          tests completed
          <span
            data-balloon-length="xlarge"
            data-balloon-pos="up"
            aria-label="Due to the increasing number of results in the database, you can now only see your last 1000 results in detail. Total time spent typing, started and completed tests stats will still be up to date at the top of the page, above the filters."
            role="alertdialog"
          >
            <i class="fas fa-question-circle"></i>
          </span>
        </div>
        <div class="val">-</div>
        <div class="avgres">-</div>
      </div>
      <div class="group timeTotalFiltered">
        <div class="title">time typing</div>
        <div class="val">-</div>
      </div>
      <div class="group highestWpm">
        <div class="title">highest wpm</div>
        <div class="val">-</div>
        <div class="mode"></div>
      </div>
      <div class="group averageWpm">
        <div class="title">average wpm</div>
        <div class="val">-</div>
      </div>
      <div class="group averageWpm10">
        <div class="title">
          average wpm
          <br />
          (last 10 tests)
        </div>
        <div class="val">-</div>
      </div>

      <div class="group highestRaw">
        <div class="title">highest raw wpm</div>
        <div class="val">-</div>
        <div class="mode"></div>
      </div>
      <div class="group averageRaw">
        <div class="title">average raw wpm</div>
        <div class="val">-</div>
      </div>
      <div class="group averageRaw10">
        <div class="title">
          average raw wpm
          <br />
          (last 10 tests)
        </div>
        <div class="val">-</div>
      </div>
      <div class="group highestAcc">
        <div class="title">highest accuracy</div>
        <div class="val">-</div>
      </div>
      <div class="group avgAcc">
        <div class="title">avg accuracy</div>
        <div class="val">-</div>
      </div>
      <div class="group avgAcc10">
        <div class="title">
          avg accuracy
          <br />
          (last 10 tests)
        </div>
        <div class="val">-</div>
      </div>
      <div class="group highestCons">
        <div class="title">highest consistency</div>
        <div class="val">-</div>
      </div>
      <div class="group avgCons">
        <div class="title">avg consistency</div>
        <div class="val">-</div>
      </div>
      <div class="group avgCons10">
        <div class="title">
          avg consistency
          <br />
          (last 10 tests)
        </div>
        <div class="val">-</div>
      </div>
      <!-- <div class="group favouriteTest">
      <div class="title">favourite test</div>
      <div class="val">words 10</div>
    </div> -->
    </div>
    <div class="group aboveHistory">
      <div class="button exportCSV">
        <i class="fas fa-file-csv"></i>
        Export CSV
      </div>
    </div>
    <div id="ad-account-2-wrapper" class="ad full-width advertisement ad-h">
      <div class="icon"><i class="fas fa-ad"></i></div>
      <div id="ad-account-2"></div>
    </div>
    <div id="ad-account-2-small-wrapper" class="ad advertisement ad-h-s">
      <div class="icon small"><i class="fas fa-ad"></i></div>
      <div id="ad-account-2-small"></div>
    </div>
    <div class="group history">
      <!-- <div class="title">result history</div> -->
      <table width="100%">
        <thead>
          <tr>
            <td></td>
            <td data-sort-property="wpm" data-sort-default-direction="desc">
              wpm
            </td>
            <td data-sort-property="rawWpm" data-sort-default-direction="desc">
              raw
            </td>
            <td data-sort-property="acc" data-sort-default-direction="desc">
              accuracy
            </td>
            <td
              data-sort-property="consistency"
              data-sort-default-direction="desc"
            >
              consistency
            </td>
            <td
              aria-label="correct/incorrect/extra/missed"
              data-balloon-pos="up"
            >
              chars
            </td>
            <td>mode</td>
            <!-- <td>punctuation</td> -->
            <td>info</td>
            <td>tags</td>
            <td
              data-sort-property="timestamp"
              data-sort-default-direction="desc"
            >
              date
            </td>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
      <div class="loadMoreButton">load more</div>
    </div>
  </div>
</div>
